<template>
  <div class="app-container">
    <el-card class="content-edit">
      <div slot="header">{{ pageType==='add'?'添加路线':'编辑路线' }}</div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="线路名称" maxlength="20">
          <el-input v-model="form['name']"/>
        </el-form-item>
        <el-form-item label="出发地">
          <el-select v-model="form['avatar']" placeholder="请选择省份">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
          <el-select v-model="form['avatar']" placeholder="请选择市">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
          <el-select v-model="form['avatar']" placeholder="请选择区">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
          <el-input :rows="2" type="textarea" placeholder="详细地址"/>
        </el-form-item>
        <el-form-item label="目的地">
          <el-select v-model="form['avatar']" placeholder="请选择省份">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
          <el-select v-model="form['avatar']" placeholder="请选择市">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
          <el-select v-model="form['avatar']" placeholder="请选择区">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
          <el-input :rows="2" type="textarea" placeholder="详细地址"/>
        </el-form-item>
        <el-form-item label="车型选择">
          <el-select v-model="form['carType']" placeholder="请选择车辆类型">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="车票价格">
          <div>
            <el-radio v-model="radio" label="1">
              <span>默认</span>
              <el-input v-model="form['lowQuota']" type="number" style="width: 140px;margin-left: 20px;">
                <span slot="suffix" style="margin-right: 10px;line-height: 40px;">元</span>
              </el-input>
            </el-radio>
          </div>
          <div class="margin-top-10">
            <el-radio v-model="radio" label="2">
              <span>周末</span>
              <el-input v-model="form['lowQuota']" type="number" style="width: 140px;margin-left: 20px;">
                <span slot="suffix" style="margin-right: 10px;line-height: 40px;">元</span>
              </el-input>
            </el-radio>
          </div>
          <div class="margin-top-10">
            <el-radio v-model="radio" label="3">
              <span>指定日期</span>
              <el-date-picker
                v-model="form['userTime']"
                class="margin-left-20"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"/>
              <el-input v-model="form['lowQuota']" type="number" style="width: 140px;">
                <span slot="suffix" style="margin-right: 10px;line-height: 40px;">元</span>
              </el-input>
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item label="佣金价格">
          <div>
            <el-radio v-model="radio" label="1">
              <span>默认</span>
              <el-input v-model="form['lowQuota']" type="number" style="width: 140px;margin-left: 20px;">
                <span slot="suffix" style="margin-right: 10px;line-height: 40px;">元</span>
              </el-input>
            </el-radio>
          </div>
          <div class="margin-top-10">
            <el-radio v-model="radio" label="2">
              <span>周末</span>
              <el-input v-model="form['lowQuota']" type="number" style="width: 140px;margin-left: 20px;">
                <span slot="suffix" style="margin-right: 10px;line-height: 40px;">元</span>
              </el-input>
            </el-radio>
          </div>
          <div class="margin-top-10">
            <el-radio v-model="radio" label="3">
              <span>指定日期</span>
              <el-date-picker
                v-model="form['userTime']"
                class="margin-left-20"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"/>
              <el-input v-model="form['lowQuota']" type="number" style="width: 140px;">
                <span slot="suffix" style="margin-right: 10px;line-height: 40px;">元</span>
              </el-input>
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item label="荷载人数">
          <el-input v-model="form['address']" type="number"/>
        </el-form-item>
        <el-form-item label="可售车票">
          <el-input v-model="form['remarks']" type="number"/>
        </el-form-item>
        <el-form-item label="班次">
          <el-input v-model="form['remarks']" type="number">
            <span slot="suffix" style="margin-right: 10px;line-height: 40px;">分钟/班</span>
          </el-input>
        </el-form-item>
        <el-form-item label="司机选择">
          <el-select v-model="form['avatar']" multiple filterable placeholder="请选择司机" style="width: 500px;">
            <el-option v-for="item in avatarList" :key="item.id" :label="item.label" :value="item.id">
              <span class="margin-right-20" style="float: right; color: #8492a6; font-size: 13px">{{ '123465' }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营时间">
          <el-time-picker
            v-model="form['userTime']"
            is-range
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"/>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'RouteCarpoolModify',
    data() {
      return {
        pageType: 'add',
        loading: false,
        // 默认头像列表
        avatarList: [{
          id: 1,
          label: '默认头像A',
          url: ''
        }],
        form: {
          // 昵称
          name: '',
          //  性别
          sex: null,
          // 状态
          status: 1,
          // 手机
          mobile: '',
          // 邮箱
          email: '',
          // 地址
          address: '',
          // 备注信息
          remarks: '',
          // 头像
          avatar: ''
        }
      }
    },
    mounted(){
      if (this.$router.currentRoute.path.indexOf('add') > 0) {
        this.pageType = 'add'
      } else {
        this.pageType = 'edit'
      }
      this.loadAvatarList();
    },
    methods: {
      // 加载默认头像列表
      loadAvatarList(){
        (async () => {
          const result = await this.$service.adminApplicationTagGetTagTree();
          if (result.code === 0) {
            this.avatarList = result.data;
          }
        })();
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true;
            (async () => {
              const params = Object.assign({}, this.form);
              const result = await this.$service.adminApplicationThemeCreate(params);
              this.loading = false;
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.$router.back();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
